<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门</title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
     <script type="importmap">
      {
        "imports": {
          "three": "./threejs/build/three.module.js",
          "three/addons/": "./threejs/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three"; 
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
      import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
      import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
      import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

      

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(0, 10, 10);

      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      new OrbitControls(camera, renderer.domElement);

      const composer = new EffectComposer(renderer);

      const renderPass = new RenderPass(scene, camera);

      composer.addPass(renderPass);

      const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.5,
        0,
        0
      );

      composer.addPass(bloomPass);

      animate();

      function animate() {
        requestAnimationFrame(animate);

        composer.render();
      }

      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      // 物体
      const geometry = new THREE.BoxGeometry();

      const material = new THREE.MeshBasicMaterial({ color: "yellow" });

      const cube = new THREE.Mesh(geometry, material);

      scene.add(cube);

      // 截图
      new GUI().add({ 截图: screenShot }, "截图");

      function screenShot() {
        renderer.render(scene, camera);

        composer.render();

        const base64 = renderer.domElement.toDataURL(["image/png", "0.8"]);

        const link = document.createElement("a");

        link.href = base64;

        link.download = "myImage.png";

        link.click();
      }
    </script>
  </body>
</html>
